<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #shop-car li {
            border: 1px dotted red;
            margin: 20px 0;
            padding: 20px;
        }

        .container {
            width: 400px;
            padding: 20px;
        }
    </style>

    <div class="container">
        <input type="checkbox" id="isAllCheck" /> 全选


        <ul id="shop-car">

        </ul>
        <p id="totalnum">总数量：xxx</p>
        <p id="totalprice">总价格：xxx</p>
    </div>

    <script>
        //1. 购物车列表数据
        let products = [
            {
                goods_name: '小米10-1',
                goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
                goods_price: '500',
                goods_attr: '砂石黑4GB+64GB',
                goods_num: 10,
                goods_is_checked: true
            },
            {
                goods_name: '小米10-2',
                goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
                goods_price: '510',
                goods_attr: '砂石黑4GB+64GB',
                goods_num: 50,
                goods_is_checked: false
            }
        ]

       //选元素
        let shoppingCar = document.getElementById('shop-car')
        let checkBtns = null
        let isAllCheck = document.getElementById('isAllCheck')

        //2. 数据和模板进行字符串拼接
        renderData()
        function renderData() {
            let str = ''
            //拼接字符串
            products.forEach(function(item){
                str += `
                        <li>
                            <input type="checkbox" ${item.goods_is_checked ? 'checked' : ''}/>
                            <div>商品名称: ${item.goods_name}</div>
                            <img src="${item.goods_img}" alt="">
                            <div>商品价格:${item.goods_price}</div>
                            <div>购买数量:${item.goods_num}</div>
                            <div>商品规格:${item.goods_attr}</div>
                            <div>是否选中：${item.goods_is_checked ? '选中吧' : '不选中啊'}</div>
                        </li>
                    `
            })

            //把拼接好的内容追加到购物车容器中
            shoppingCar.innerHTML = str

            //重新计算总价格、总数量、全选状态
            changeCheckStatus()
            computeNumPrice()
            computedAllChecked()
        }
       

        //5. 是否全选 
        computedAllChecked()
        function computedAllChecked(){
            let isAllChecked = products.every(function (product) {
                return product.goods_is_checked
            })
            

            //console.log(isAllChecked ,'是否全选');
            
            if (isAllChecked) {
                isAllCheck.checked = true
            }else{
                isAllCheck.checked = false
            }
        }
        //点击全选按钮要做的动作
        isAllCheck.onchange = function(){
            let _this = this
            products.forEach(function(item){
               item.goods_is_checked = _this.checked
            })

            //重新渲染新的数据
            renderData()
        }


        //6. 总数量和总价格
        computeNumPrice()
        function computeNumPrice() {
            let totalNum = 0
            let totalPrice = 0
            products.forEach(function(item){
                if (item.goods_is_checked) { //选中的时候才累加
                    totalNum += item.goods_num
                    totalPrice += item.goods_num * item.goods_price
                }
            })
            
            let totalnum = document.getElementById('totalnum')
            let totalprice = document.getElementById('totalprice')
            totalnum.innerHTML = `总数量为：${totalNum}`
            totalprice.innerHTML = `总价格为：${totalPrice}`
        }

        //点击某一个按钮要做的动作
       changeCheckStatus()
       function changeCheckStatus(){
            // 当重新渲染页面以后，每一个input的事件会消失，需要重新选择每一个input并绑定事件。
            checkBtns = [...shoppingCar.getElementsByTagName('input')]
            // console.log( checkBtns );
            checkBtns.forEach(function(item,index){
                item.onchange = function(){
                    //console.log(this.checked,index);
                    products[index].goods_is_checked = this.checked
                    renderData()
                }
            })
       }
        
    </script>
</body>

</html>